<template>
	<div class="container-wrap">
		<div class="top-wrap" v-if="title">
			<!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"/> -->
			<uni-nav-bar fixed shadow :border="false" left-icon="left" :title="title" @click-left="onClickLeft">
				<template #bottom>
					<view class="uni-nav-bottom">
						<van-tabs v-model="activeName">
							<van-tab v-for="item in getNaviData" :key="item.id" :title="item.name"
								:name="item.id"></van-tab>
						</van-tabs>
						<div class="search-bar">
				<van-search v-model="name" shape="round" placeholder="请输入搜索关键词" input-align="center" @clear="searchList"
					@search="searchList"></van-search>
				<span class="font-btn" @click="showAction = true" v-if="!type">筛选</span>
			</div>
					</view>
				</template>
			</uni-nav-bar>
		
		</div>
		<div class="top-wrap active" v-else>
			<van-search v-model="name" shape="round" placeholder="请输入搜索关键词" input-align="center" @clear="searchList"
				@search="searchList"></van-search>
			<span class="font-btn" @click="showAction = true" v-if="!type">筛选</span>
		</div>
		<div class="list-wrap common-wrap">
			<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="loadMore">
				<ListItem :activeName="activeName" :list="list" vertical></ListItem>
			</van-list>
		</div>
		<van-action-sheet v-model="showAction">
			<div class="action-content">
				<div class="default-title">直播状态</div>
				<CustomSelect v-model="liveStatus" :options="statusOptions"></CustomSelect>
				<div class="mt20 dropdown-custom-bottom-btn">
					<button class="cancel-btn" round @click="onReset">重置筛选</button>
					<button type="primary" round @click="searchList">确认</button>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
import ListItem from '@/components/live/listItem.vue'
import CustomSelect from '@/components/common/CustomSelect'
import vanSearch from '@/components/vant/van-search/van-search.vue'
import vanList from '@/components/vant/van-list/van-list.vue'
import vanActionSheet from '@/components/vant/van-action-sheet/van-action-sheet.vue'
import vanTab from '@/components/vant/van-tab/van-tab.vue'
import vanTabs from '@/components/vant/van-tabs/van-tabs.vue'
export default {
	data() {
		return {
			type: '',
			name: '', // 1
			showAction: false,
			liveStatus: [''],
			page: {
				pageNumber: 1,
				pageSize: 10,
			},
			list: [], // 课程列表
			listLoading: false,
			listFinished: false,
			activeName: 1,
			getNaviData: [{
				name: "我参与的直播",
				id: 1
			}, {
				name: "我主持的直播",
				id: 2
			}],
			statusOptions: [{
				name: '全部',
				value: ''
			},
			{
				name: '未开始',
				value: '0'
			},
			{
				name: '正在直播',
				value: '1'
			},
			{
				name: '已结束',
				value: '2'
			}
			],
		}
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		query: {
			type: Object,
			default: () => { }
		}
	},
	computed: {},
	components: {
		ListItem,
		CustomSelect,
		vanSearch,
		vanList,
		vanActionSheet,
		vanTab,
		vanTabs
	},
	watch: {
		activeName(val) {
				this.getList(true)
		}
	},
	mounted() {

		this.type = this.query.type ? this.query.type : "";
		this.getList()
	},
	methods: {
		onClickLeft() {
			uni.navigateBack({
				delta: 1
			})
			// this.$uniPush({ name: 'index' })
			// this.$route.query.isFormOAPage ? this.$router.push('/') : this.$router.go(-1);
			// this.$router.go(-1)
		},
		searchList() {
			this.showAction = false
			this.getList(true)
		},
		getList(loadNew = false) {
			if (loadNew === true) {
				this.list = []
				this.listFinished = false
				this.page.pageNumber = 1
			}
			this.listLoading = true
			let params = Object.assign({
				name: this.name
			}, this.page)
			params.liveStatus = this.liveStatus[0] || this.type;
		let promise=this.activeName == 1 ? this.$api.live.liveUserMain(params) : this.$api.live.liveUserList(params)
		promise.then(res => {
				this.list = this.list.concat(res.list || [])
				this.noMoreState(res)
				this.listLoading = false
				this.pageLoading && this.pageLoading.clear()
			}).catch(e => {
				this.listLoading = false
				this.listFinished = true
				this.pageLoading && this.pageLoading.clear()
			})
		},
		noMoreState(res) {
			if (res.totalPage <= this.page.pageNumber || (res.list && res.list.length === 0)) {
				this.listFinished = true
			} else {
				this.page.pageNumber++
			}
		},
		loadMore() {
			if (!this.listFinished) {
				this.getList()
			}
		},
		onReset() {
			this.pageLoading = this.$toast.loading()
			this.liveStatus = []
			this.showAction = false
			this.searchList()
		}
	}
}
</script>

<style lang="scss" scoped>
.van-nav-bar.van-hairline--bottom::after {
	display: none;
}

:deep(.qy-com-learn-course) {
	padding-top: 50px;

	.search-bar {
		padding: 0;
	}

	.van-search {
		padding-top: 0;
	}

	.font-btn {
		margin-top: 8px !important;
	}
}

.container-wrap {
	position: relative;
	background: #F6F6F6;
}

.search-bar {
	display: flex;
	align-content: center;
	background: #fff;

	.van-search {
		flex: 1;
	}

	.font-btn {
		padding: 18px 15px 0 0;
	}
}

.action-content {
	padding: 25px 20px 40px;

	.default-title {
		margin-bottom: 8px;
	}
}

.top-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;

	.van-nav-bar {
		background: #fff;

		&+.van-search {
			background: #fff;
			padding-top: 0;
		}

		.font-btn {
			margin-top: 18px;
		}
	}

	&.active {
		position: absolute;
		padding: 5px 0;

		&+.list-wrap {
			padding-top: 50px;
			height: calc(100vh - 235px);
		}
	}

	&+.list-wrap {
		padding: 190px 0 0;
		overflow: auto;
		height: 100vh;
	}
}
</style>